<template>
    <div class="baguwen-container">
        <GradientBackground />
        <div class="content">
            <div v-if="!isTopicRoute" class="tag-nav">
                <TagNav />
            </div>
            <div class="topic-container">
                <CategoryCard v-if="!isTopicRoute"/>
                <router-view v-else></router-view>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import CategoryCard from '@/components/baguwen/CategoryCard.vue';
import TagNav from '@/components/baguwen/TagNav.vue';
import GradientBackground from '@/components/common/GradientBackground.vue';
import { computed } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();

const isTopicRoute = computed(() => route.path.includes('/topic/'));

</script>

<style scoped>
.baguwen-container {
    min-height: 100vh;
    width: 100%;
    position: relative;
    margin: 0;
    /* 移除可能的外边距 */
    padding: 0;
    /* 移除可能的内边距 */
}

.content {
    position: relative;
    z-index: 1;
    padding: 0 30px;
    /* 确保内容区域是透明的 */
    background: transparent;
}

.tag-nav {
    margin-top: 30px;
}

.topic-container {
    margin-top: 30px;
}
</style>